<template>
	<view class="information">
		<view class="headInstructions">
			根据监管要求，请您在购买产品前完善个人信息。该信息仅用于在本平台购买金融机构发行的金融产品或服务，我们将严格保密您的个人信息
		</view>
		<view class="contact">
			<view class="contact-item">
				联系方式（必填）
			</view>
			<view class="contact-item">
				<text class="contact-item-text">详细地址</text>
				<view class="contact-item-input">
					<input type="text" v-model="adress" placeholder="路/街+门牌号，例南京路888号" />
				</view>
			</view>
			<view class="contact-item">
				<text class="contact-item-text">邮箱地址</text>
				<view class="contact-item-input">
					<input type="text"  v-model="email" placeholder="用于接收电子保单和年度账单" />
				</view>
			</view>
		</view>
		<view class="Myinformation">
			<view class="Myinformation-item">
				<text class="Myinformation-item-text">职业类型</text>
				<view class="">
					<picker mode="selector" :value="index2" :range="Professional" @change="bindPickerChangeProfessional">
						<view>{{Professional[index2]}}</view>
					</picker>
				</view>
			</view>
			<view class="Myinformation-item">
				<text class="Myinformation-item-text">工作地区</text>
				<view class="">
					<picker mode="selector" :value="index" :range="city" @change="bindPickerChangeCity">
						<view>{{city[index]}}</view>
					</picker>
					<picker mode="selector" :value="index1" :range="area" @change="bindPickerChangeArea">
						<view>{{area[index1]}}</view>
					</picker>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="information-btn" @tap="goPayIndex">
			确定
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Professional:['一般工作人员','教师','宇航员','科学家','九指乞丐'],
				city: ['成都', '南充', '重庆', '北京'],
				area: ['双流区', '青羊区', '高新区', '天府新区'],
				index: 0,
				index1: 0,
				index2: 0,
				adress:"",
				email:'',
			}
		},
		methods: {
			bindPickerChangeCity(e) {
				this.index = e.target.value
			},
			bindPickerChangeArea(e) {
				this.index1 = e.target.value
			},
			bindPickerChangeProfessional(e){
				this.index2 = e.target.value
			},
			goPayIndex(){
				if(this.adress!=""&&this.email!=""){
					//打开确认支付弹窗
					this.$store.commit("CHANG_OKPAY",true);	
					uni.redirectTo({
						url:"../pay_index/pay_index"
					})
				}else{
					uni.showToast({
					    title: '请填写必要资料',
					    duration: 1500,
						icon:"error"
					});
				}
				
				
			}
		}
	}
</script>

<style scoped>
	
	.information {
		background-color: #f3f3f3;
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.headInstructions {
		padding: 40rpx 60rpx 60rpx 40rpx;
		font-size: 24rpx;
		width: 100vw;
		box-sizing: border-box;
	}

	.contact {
		width: 100vw;
		box-sizing: border-box;
		padding: 0 40rpx;
		margin-bottom: 30rpx;
		background-color: #fff;
	}
	.Myinformation{
		width: 100vw;
		box-sizing: border-box;
	}
	.contact-item,
	.Myinformation-item {
		padding: 40rpx 0;
		font-size: 28rpx;
		display: flex;
		border-bottom: 1rpx solid #fbfbfb;
	}

	.contact-item-text,
	.Myinformation-item-text {
		width: 115rpx;
		display: inline-block;
		margin-right: 30rpx;
	}
	.contact-item-input{
		flex-grow: 1;
	}
	.Myinformation {
		background-color: #fff;
	}

	.Myinformation-item {
		padding: 40rpx;
		color: #999;
	}
	.information-btn{
		width: 670rpx;
		height: 88rpx;
		background-color: #3476f1;
		color: #fff;
		font-size: 28rpx;
		margin: 0 auto;
		position: absolute;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 5rpx;
	}
</style>
